<template>
	<div class="ckeckorder-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="order-content">
			<div class="orderMsg" v-for="(item,index) in orderMsgArr">
				<p class="order-one">
					<span>收货人：{{item.iconName}}</span><span class="tel">{{item.telphone}}</span>
				</p>
				<p class="order-two">
					<span>收货地址：{{item.address}}</span>
					<span>
					<i class="iconfont icon-iconfontyoujiantou"></i>
					</span>
				</p>
			</div>
			<div class="ordertitle">
				<div class="ordT-left">
					<i class="iconfont icon-yuanquan"></i>
					<img src="../../../assets/images/shopping/img_yage@2x.png" alt="">
				</div>
				<div class="ordT-center">
					<p class="order-title">雅阁沙发</p>
					<p class="icon-order">
						<i class="iconfont icon-renminbi"></i>
						<span>100.00</span>
					</p>
				</div>
				<div class="ordT-right">
					<p>X 1</p>
				</div>
			</div>
		</div>
		<div class="order-footer">
			<div class="order-footer-left">
				<span class="total">合计：</span>
				<i class="iconfont icon-renminbi"></i>
				<span class="price">100.00</span>
			</div>
			<div class="order-footer-right">
				<router-link to="/shopping/shopcar/shoporder">提交订单</router-link>
			</div>
		</div>
		<div class="zhanwei"></div>
	</div>
</template>
<script>
	import "../../../assets/iconfont/iconfont.css"
	import ShopHeader from "../../../components/shopheader"
	export default {
		name:'checkorder',
		data(){
			return{
				orderMsgArr:[
					{
						iconName:"赵先生",
						address:"北京市海淀区西三旗",
						telphone:"13105269315",
					}
				],
				dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-zuojiantou",
							iconRight:"icon-lajixiang"
						}
					],
					placeholder:"确认订单",
					aimUrl:"/shopping/shopcar",
					rightUrl:""
				}
			}
		},
		components:{
			ShopHeader
		}
	}
</script>
<style scoped lang="less">
	.ckeckorder-container{
		width: 100%;
		background-color: #efefef;
		overflow: hidden;
		.order-content{
			margin-top: 88 / 2 / 50rem;
			height: 800 / 50rem;
			width: 100%;
			overflow: hidden;
			.orderMsg{
				width: 100%;
				height: 126 / 2 / 50rem;
				background-color: #fff;
				margin-top: 20 / 2 / 50rem;
				color: rgba(0,0,0,.8);
				font-size: 14 / 50rem;
				font-weight: 700;
				overflow: hidden;
				.order-one{
					position: relative;
					margin: 26 / 2 / 50rem 40 / 2 / 50rem 0 40 / 2 / 50rem;
					.tel{
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
				.order-two{
					position: relative;
					margin: 20 / 2 / 50rem 40 / 2 / 50rem 28 / 2 / 50rem 40 / 2 / 50rem;
					i{
						position: absolute;
						right: 0;
						bottom: 0;
					}
				}
			}
			.ordertitle{
				width: 95%;
				height: 190 / 2 / 50rem;
				background-color: #fff;
				border-radius: 10 / 2 / 50rem;
				margin: 0 auto;
				margin-top: 20 / 2 / 50rem;
				overflow: hidden;
				.ordT-left,.ordT-center,.ordT-right{
					float: left;
					height: 100%;
				}
				.ordT-left{
					width: 39%;
					text-align: center;
					margin-top: 26 / 2 / 50rem;
					img{
						width: 185 / 2 / 50rem;
						height: 135 / 2 / 50rem;
						vertical-align: middle;	
					}
				}
				.ordT-center{
					width: 42%;
					overflow: hidden;
					.order-title{
						margin-top: 64 / 2 / 50rem;
						font-size: 16 / 50rem;
						font-weight: 700;
						color: rgba(0,0,0,.8);
						margin-bottom: 18 / 2 / 50rem;
					}
					.icon-order{
						color: #f55;
						font-size: 16 / 50rem;
					}
				}
				.ordT-right{
					width: 19%;
					position: relative;
					p{
						color: rgba(0,0,0,.8);
						font-size: 18 / 50rem;
						position: absolute;
						bottom: 30 / 2 / 50rem;
						right: 52 / 2 / 50rem;
					}
				}
			}
		}
		.order-footer{
			width: 100%;
			height: 105 / 2 / 50rem;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			.order-footer-left,.order-footer-right{
				float: left;
			}
			.order-footer-right{
				width: 220 / 2 / 50rem;
				height: 100%;
				background-color: #f55;
				text-align: center;
				color: #fff;
				font-size: 18 / 50rem;
				font-weight: 700;
				line-height: 105 / 2 / 50rem;
			}
			.order-footer-left{
				width: 530 / 2 / 50rem;
				height: 100%;
				color: rgba(0,0,0,.8);
				font-size: 18 / 50rem;
				font-weight: 700;
				line-height: 105 / 2 / 50rem;
				box-sizing: border-box;
				.total{
					margin-left: 220 / 2 / 50rem;
				}
				i,span.price{
					color: #f55;
				}
				i{
					font-size: 20 / 50rem;
				}
			}
		}
		.zhanwei{
			width: 100%;
			height: 105 / 2 / 50rem;
		}
	}
</style>